<!--
 * @Author: your name
 * @Date: 2021-06-29 09:29:27
 * @LastEditTime: 2021-07-03 20:26:08
 * @LastEditors: jiangsx
 * @Description: In User Settings Edit
 * @FilePath: \briup\day15\mobile-app\src\views\home\Money.vue
-->
<template>
  <div>
    <van-row type="flex">
      <van-col span="24" class="header">收 益</van-col>
    </van-row>
    <van-row type="flex">
      <van-col span="24">
        <van-tabs
          v-model="active"
          animated
          title-active-color="#7579ff"
          color="#7579ff"
        >
          <van-tab title="全部">
            <div>
              <ul>
                <li
                  v-for="(item, index) in tabList2"
                  :key="index"
                  class="all"
                  style="display: flex"
                >
                  <img
                    :src="item.customer.userFace"
                    alt=""
                    width="88px"
                    height="80%"
                    style="
                      border-radius: 50%;
                      margin-left: 1.5em;
                      margin-top: 0.8em;
                      float: left;
                    "
                  />
                  <div id="div1">
                    <span style="">{{ item.customer.username }}</span>
                    <span style="font-size: 11px; color: red; float: right">{{
                      item.status
                    }}</span>
                    <p style="font-size: 12px; margin-top: 1em; color: #666">
                      {{ item.address.province }}{{ item.address.city
                      }}{{ item.address.area }}{{ item.address.address }}
                    </p>
                    <span style="font-size: 13px; float: left">{{
                      arr3[index]
                    }}</span>
                    <span style="font-size: 13px; float: right"
                      >￥{{ num }}</span
                    >
                  </div>
                </li>
              </ul>
            </div>
          </van-tab>

          <van-tab title="提现">
            <div>
              <ul class="ul">
                <li
                  class="pay"
                  v-for="(item, index) in tabList"
                  :key="index"
                  id="li"
                >
                  <div style="padding: 1em">
                    <span>{{ item.applyType }}-银行卡</span>
                    <span style="float: right">￥{{ item.money }}</span>
                  </div>
                  <div
                    style="
                      margin-left: 1em;
                      margin-right: 1em;
                      margin-top: 0.2em;
                    "
                  >
                    <span style="font-size: 11px" id="span">{{
                      arr3[index]
                    }}</span>
                    <span
                      style="
                        float: right;
                        font-size: 11px;
                        color: #0de66e;
                        opacity: 1;
                      "
                      v-if="item.status == '通过'"
                      id="span"
                      >{{ item.status }}</span
                    >
                    <span
                      id="span"
                      style="
                        float: right;
                        font-size: 11px;
                        color: #f53b3b;
                        opacity: 1;
                      "
                      v-else
                      >{{ item.status }}</span
                    >
                  </div>
                </li>
              </ul>
            </div>
          </van-tab>
        </van-tabs>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { pageQueryAccountApply, pageQuery } from "@/api/pageQueryAccountApply";
import Vue from "vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      active: "",
      tabList: [],
      arr: [],
      arr3: [],
      tabList2: [],
      temp: [],
      num: 0,
    };
  },
  computed: {},
  methods: {
    async payRequest() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      let res = await pageQueryAccountApply({ page: 1, pageSize: 10 });
      this.tabList = res.data.list;
      for (let key in this.tabList) {
        let a = this.tabList[key].applyTime;
        a = this.getLocalTime(a);
        this.arr3.push(a);
      }
      Toast.clear();
      // console.log(this.tabList);
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, " ");
    },
    async searchOrder() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      let res1 = await pageQuery({ page: 1, pageSize: 100, status: "已完成" });
      this.tabList2 = res1.data.list;
      this.for();
      this.num = this.sum(this.temp);
      Toast.clear();
      // console.log(this.tabList2);
    },
    // for1() {
    //   for (let key1 in this.arr1) {
    //     this.arr2 += this.arr1[key1];
    //   }
    // },
    for() {
      for (let key in this.tabList2) {
        // console.log(this.tabList[key].orderLines);
        this.tabList2[key].orderLines;
        for (let key1 in this.tabList2[key].orderLines) {
          //   console.log(this.tabList[key].orderLines[key1].price);
          this.temp.push(this.tabList2[key].orderLines[key1].price);
        }
      }
    },
    sum(arr) {
      return eval(arr.join("+"));
    },
  },
  created() {
    this.payRequest();
    this.searchOrder();
  },
  mounted() {},
};
</script>
<style>
.header {
  background: linear-gradient(90deg, #bf73ff, #7579ff);
  height: 4em;
  text-align: center;
  line-height: 4em;
  color: white;
}
.all {
  width: 90%;
  margin: 1em;
  height: 7em;
}
.pay {
  width: 90%;
  margin: 1em;
  height: 6em;
}
span {
  font-weight: 300;
  opacity: 0.7;
}
li {
  border-radius: 5%;
  box-shadow: 0 0 10px #ccc;
  background: linear-gradient(rgb(165, 174, 247), #f5f5f5);
}
#div1 {
  float: right;
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 0.7em;
  width: 100%;
}
.ul {
  margin-bottom: 5em;
}
</style>